<template>
	<view class="OrderDetailsBox">
		<cu-custom isBack="true" fh-color="black">
			<template slot="backText" v-if="OrderDetails.orderStatus === 20">
				<view style="font-size: 40rpx;">订单已取消</view>
			</template>
			<template slot="backText" v-if="OrderDetails.orderStatus === 28">
				<view style="font-size: 40rpx;">等待付款</view>
			</template>
			<template slot="backText" v-if="OrderDetails.orderStatus === 29">
				<view style="font-size: 40rpx;">等待平台发货</view>
			</template>
			<template slot="backText" v-if="OrderDetails.orderStatus === 30">
				<view style="font-size: 40rpx;">平台已发货</view>
			</template>
			<template slot="backText" v-if="OrderDetails.orderStatus === 40">
				<view style="font-size: 40rpx;">订单已完成</view>
			</template>
			<template slot="backText" v-if="OrderDetails.orderStatus === 130">
				<view style="font-size: 40rpx;">已退款</view>
			</template>
		</cu-custom>
		<view class="bg" v-if="OrderDetails.orderStatus === 20"
			:style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-cancelled.png'})`}">
		</view>
		<view class="bg" v-if="OrderDetails.orderStatus === 28"
			:style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-ToBePaid.jpg'})`}">
		</view>
		<view class="bg" v-if="OrderDetails.orderStatus === 29"
			:style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-GoodsToBeShipped.jpg'})`}">
		</view>
		<view class="bg" v-if="OrderDetails.orderStatus === 30"
			:style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-shipped.jpg'})`}">
		</view>
		<view class="bg" v-if="OrderDetails.orderStatus === 40||OrderDetails.orderStatus === 130"
			:style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-HaveCompleted.jpg'})`}">
		</view>
		<scroll-view :scroll-y="true" :style="{height:height-CustomBar +'px'}" class="OrderStatusAndAddress"
			:class="{OrderStatusAndAddressYs:OrderDetails.orderStatus !== 30 && OrderDetails.orderStatus !== 28}">
			<view class="Address">
				<view class="AddressLeft">
					<img :src="imgUrl + gameDetailsData.Order.Address" alt="" class="AddressLeftImage" />
				</view>
				<view class="AddressRight">
					<view class="AddressRightBottom">
						{{ OrderDetails.receiverDetail }}
					</view>
					<view class="AddressRightTop">
						<view class="NameAndPhoneNumber">
							<view class="NameArea"> {{ OrderDetails.receiverName }}</view>
							<view class="PhoneNumber"> {{ OrderDetails.receiverTel }}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="CommodityInformation">
				<view class="CommodityList" v-for="(item, index) in OrderDetails.orderGoodsDetailVo" :key="index">
					<view class="ListItemLeft">
						<view class="pic">
							<img :src="item.previewImg" alt="" class="Image" />
						</view>
						<view class="NameAndSpecification">
							<view class="Name">{{ item.goodsName }}</view>
							<view class="Specification">{{ item.specificationName }}</view>
						</view>
					</view>

					<view class="PriceAndCount">
						<view class="Price">
							<view class="RMB">￥</view>
							<view class="priceNum">{{ item.goodsPrice }}</view>
						</view>
						<view class="Count">x{{ item.goodsNum }}</view>
					</view>


				</view>
			</view>

			<view class="OrderInformation">
				<!-- 快递信息 已发货显示 -->
				<!-- 快递公司 -->
				<view class="CourierServicesCompany InfoItem" v-if="OrderDetails.orderStatus === 30">
					<view class="CourierServicesCompanyLeft InfoTitle">快递公司</view>
					<view class="CourierServicesCompanyRight InfoContent">{{ OrderDetails.logisticsCompanyName }}</view>
				</view>
				<!-- 快递单号 -->
				<view class="trackingNumber InfoItem" v-if="OrderDetails.orderStatus === 30">
					<view class="trackingNumberLeft InfoTitle">快递单号</view>
					<view class="trackingNumberRight InfoContent">{{ OrderDetails.logisticsCode }}</view>
				</view>
				<view class="TotalPrice InfoItem">
					<view class="TotalPirceLeft InfoTitle">订单总额</view>
					<view class="TotalPirceRight InfoContent">¥&nbsp;&nbsp;
						{{ OrderDetails.orderPrice }}
					</view>
				</view>
				<view class="OrderNumber InfoItem">
					<view class="OrderNumberLeft InfoTitle">订单编号</view>
					<view class="OrderNumberRight InfoContent">{{ OrderDetails.orderCode }}</view>
				</view>
				<view class="OrderTime InfoItem">
					<view class="OrderTimeLeft InfoTitle">创建时间</view>
					<view class="OrderTimeRight InfoContent">{{ OrderDetails.createTime }}</view>
				</view>
				<view class="OrderNote InfoItem">
					<view class="OrderNoteLeft InfoTitle">订单备注</view>
					<view class="OrderNoteRight InfoContent">{{ OrderDetails.remark ? OrderDetails.remark : '无' }}
					</view>
				</view>

			</view>

			<view class="PaymentInformationTitle" v-if="OrderDetails.payMode === 2&&OrderDetails.realPayImgUrl">付款信息
			</view>
			<view class="PaymentInformation" v-if="OrderDetails.payMode === 2&&OrderDetails.realPayImgUrl">
				<view class="MethodOfPayment infoItem">
					<view class="MethodOfPaymentLeft infoItemTitle">支付方式</view>
					<view class="MethodOfPaymentRight">{{ realPayTypeList[OrderDetails.realPayType] }}</view>
				</view>
				<view class="ProofOfPayment infoItem">
					<view class="ProofOfPaymentLeft infoItemTitle">付款凭证</view>
					<view class="ProofOfPaymentRight">
						<image v-for="(item,index) in OrderDetails.realPayImgUrl"
							@click.stop="SeeImg(OrderDetails.realPayImgUrl,index)" :key="index" :src="item"
							class="ProofOfPaymentImage"></image>
					</view>
				</view>
				<view class="OrderNote infoItem">
					<view class="OrderNoteLeft infoItemTitle">凭证备注</view>
					<view class="OrderNoteRight">{{ OrderDetails.realRemark ? OrderDetails.realRemark : '无' }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="ConfimReceiveGoods" v-if="OrderDetails.orderStatus === 30 || OrderDetails.orderStatus === 28">
			<view class="CancelOrderBtn" @click.stop="CancelOrder(OrderDetails.orderCode)"
				v-if="OrderDetails.orderStatus === 28">取消订单
			</view>
			<view class="ReceiveGoodsBtn" @click="ReceiveGoods(OrderDetails.orderCode)"
				v-if="OrderDetails.orderStatus === 30">
				确认收货
			</view>
			<view class="ReceiveGoodsBtn" @click.stop="pay(OrderDetails)"
				v-if="OrderDetails.orderStatus === 28&&OrderDetails.payMode!==2">立即支付
			</view>
			<view class="ProofPaymentBtn"
				v-if="(OrderDetails.payMode === 2 && OrderDetails.orderStatus === 28) && OrderDetails.payInfoStatus !== true"
				@click.stop="ProofPayment('',OrderDetails.orderCode)">付款凭证
			</view>
		</view>

		<view class="cu-modal" :class="modalName === 'Image'?'show':''" @click="modalName = null">
			<view class="cu-dialog" @click.stop="">
				<view class="ProofPayment">
					<view class="title">付款信息</view>
					<view class="MethodOfPayment">
						<view class="MethodOfPaymentTitle">支付方式</view>
						<picker mode="selector" class="picker" :range="rangeList" range-key="name"
							@change="pickerChange">
							<view class="Selector">
								<view v-if="rangeIndex === ''" style="font-size: 28rpx">请选择支付方式</view>
								<view v-else style="color: #333">{{ rangeList[rangeIndex].name }}</view>
								<image class="BottomArrow" :src="imgUrl + '/static/classification/DropArrow_Icon.png'">
								</image>
							</view>
						</picker>
					</view>
					<view class="ProofOfPayment">
						<view class="ProofOfPaymentTitle">付款凭证</view>
						<view class="ProofOfPaymentContent">
							<view class="ProofList" v-if="ProofList.length > 0">
								<view v-for="(item,index) in ProofList" :key="index" class="ProofListItem">
									<image :src="item" class="ProofListImage"></image>
									<image :src="imgUrl + '/static/Order/del.png'" class="clearImage"
										@click.stop="delClick(index)"></image>
								</view>
							</view>
							<image class="UploadImage" :src="imgUrl + '/static/Order/Upload.jpg'" @click="UploadImage"
								v-if="ProofList.length < 3"></image>
						</view>
					</view>
					<view class="NoteOfVoucher">
						<view class="NoteOfVoucherTitle">凭证备注</view>
						<textarea class="textarea" type="text" placeholder="可以输入必要的备注信息，方便查账" v-model="textareaValue"
							placeholder-class="placeholder"></textarea>
					</view>
					<view class="BtnArea">
						<view class="CancelBtn" @click="ProofPayment('Cancel')">取消</view>
						<view class="ConfirmBtn" @click="ProofPayment('Confirm')">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public.js";

	export default {

		data() {
			return {
				CustomBar: this.CustomBar,
				height: '',

				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,

				CommodityList: [],

				OrderCode: "",

				OrderDetails: {},

				realPayTypeList: {
					1: '微信',
					2: '支付宝',
					3: '银行卡',
					4: '其他'
				},

				modalName: '',

				ProofList: [],

				rangeList: [{
						name: '微信',
						value: 1
					},
					{
						name: '支付宝',
						value: 2
					},
					{
						name: '银行卡',
						value: 3
					},
					{
						name: '其他',
						value: 4
					}
				],
				rangeIndex: '',

				rangeValue: '',

				textareaValue: '',
			};
		},
		onLoad({
			id
		}) {
			this.height = uni.getSystemInfoSync().windowHeight
			this.OrderCode = id;
			this.getOrderInfo();
			uni.$off('gainImage')
			uni.$on('gainImage', (data) => {
				this.ProofList.push(data)
			})
		},
		methods: {
			// 获取订单详情
			async getOrderInfo() {
				const url = this.api.Order.getOrderDetails;
				const {
					data
				} = await this.$http.get(url, {
					orderCode: this.OrderCode,
				});
				this.OrderDetails = data.data
				this.OrderDetails.realPayImgUrl = JSON.parse(this.OrderDetails.realPayImgUrl)
				console.log(data, 'getOrderInfo');
			},
			// 确认收货
			async ReceiveGoods(id) {
				const url = this.api.Order.ReceiveGoods;
				const res = await this.$http.get(url, {
					orderCode: id,
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: "确认收货成功",
						icon: "success",
					});
				}
				uni.navigateBack({})
				// console.log(res.data, "确认收货");
			},
			// 删除图片
			delClick(n) {
				this.ProofList.splice(n, 1)
			},
			CancelOrder() {
				uni.showModal({
					title: "确定取消订单吗？",
					success: async (res) => {
						if (res.confirm) {
							const url = this.api.Order.CancelOrder
							const {
								data
							} = await this.$http.get(url, {
								orderCode: this.OrderCode,
							});
							if (data.code === 200) {
								uni.showToast({
									title: "取消订单成功",
									icon: "success",
								});
								uni.navigateBack({});
							}
						}
					},

				})

				// console.log(res.data, "取消订单");
			},
			pickerChange(e) {
				this.rangeIndex = e.detail.value
				this.rangeValue = this.rangeList[e.detail.value].name
			},
			// 查看图片
			SeeImg(imgList, index) {
				var arr = []
				for (var i in imgList) {
					arr.push(imgList[i])
				}
				uni.previewImage({
					urls: arr,
					current: index
				})
			},
			// 上传图片
			UploadImage() {
				if (this.ProofList.length >= 3) {
					uni.showToast({
						title: '最多上传三张',
						icon: 'none'
					})
					return
				}
				this.$ChooseImage.ChooseImage(3 - this.ProofList.length)
				uni.hideLoading()
			},
			// 付款凭证
			async ProofPayment(condition, Code) {
				console.log(this.textareaValue);
				if (condition === '') {
					this.CurrentModel = 'ProofPayment'
					this.showModel()
					this.orderCode = Code
				} else {
					if (condition === 'Cancel') {
						this.hideModel()
					} else if (condition === 'Confirm') {
						console.log(this.textareaValue, '11111');
						if (this.rangeValue === '') {
							uni.showToast({
								title: '请选择付款方式',
								icon: 'none'
							})
							return
						}
						if (this.ProofList.length === 0) {
							uni.showToast({
								title: '请上传付款凭证',
								icon: 'none'
							})
							return
						}
						const url = this.api.Order.OfflinePay
						const StringProofList = JSON.stringify(this.ProofList)
						const res = await this.$http.post(url, {
							orderCode: this.orderCode,
							payImgUrl: StringProofList,
							payType: this.rangeList[this.rangeIndex].value,
							remark: this.textareaValue
						})
						if (res.data.code === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							})
						}
						this.hideModel()
						this.OrderList = []
						await this.getOrderInfo()
					}
				}
			},
			async pay(item) {
				const urla = this.api.Order.orderPay;
				let details = await this.$http.post(urla, {
					orderCode: item.orderCode,
					payMode: 1
				})
				let arr = details.data.data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: arr.timeStamp,
					nonceStr: arr.nonceStr,
					package: arr.package,
					signType: arr.signType,
					paySign: arr.paySign,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						this.getOrderInfo()
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						})
					}
				});
			},
			hideModel() {
				this.modalName = null
			},
			showModel() {
				this.modalName = 'Image'
			}
		},
	};
</script>

<style lang="scss" scoped>
	.OrderDetailsBox {
		position: relative;

		.bg {
			width: 750rpx;
			height: 100%;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.OrderStatusAndAddress {
			padding-bottom: 148rpx;
			width: 702rpx;
			margin: 0 auto;
			padding-top: 24rpx;

			.OrderStatus {
				display: flex;
				height: 30rpx;
				margin-left: 20rpx;

				.TimeIcon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}

				.text {
					color: #FFFFFF;
					font-size: 32rpx;
				}
			}

			.Address {
				width: 702rpx;
				height: 138rpx;
				background: #ffffff;
				box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(8, 49, 213, 0.05);
				opacity: 1;
				border-radius: 15rpx;
				display: flex;
				align-items: center;

				.AddressLeft {
					width: 28rpx;
					height: 36rpx;
					background: #ffffff;
					opacity: 1;
					margin-left: 50rpx;

					.AddressLeftImage {
						width: 100%;
						height: 100%;
					}
				}

				.AddressRight {
					margin-left: 26rpx;

					.AddressRightTop {
						color: #000000;
						opacity: .4;
						margin-top: 8rpx;

						.NameAndPhoneNumber {
							display: flex;
							align-items: center;

							.NameArea {
								font-size: 28rpx;
								font-weight: 500;
								margin-right: 16rpx;
							}

							.PhoneNumber {
								font-weight: 400;
							}
						}
					}

					.AddressRightBottom {
						color: #333;
					}
				}
			}

			.container {
				position: fixed;
			}

			.CommodityInformation {
				width: 702rpx;
				background-color: #FFFFFF;
				border-radius: 25rpx;
				margin-top: 16rpx;
				padding: 32rpx 24rpx;

				.CommodityList {
					display: flex;
					margin-bottom: 20rpx;
					color: #333;
					font-size: 28rpx;

					.ListItemLeft {
						display: flex;
						flex: 1;
					}

					&:last-child {
						margin-bottom: 0;
					}

					.pic {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						background-color: #ccc;
						margin-right: 16rpx;
						overflow: hidden;
						.Image {
							width: 100%;
							height: 100%;
						}
					}

					.NameAndSpecification {
						// margin-left: 20rpx;

						.Name {
							font-size: 28rpx;
							color: #000;
						}

						.Specification {
							height: 56rpx;
							background: rgba(153, 153, 153, 0.12);
							border-radius: 8rpx;
							margin-top: 20rpx;
							text-align: center;
							line-height: 56rpx;
							padding: 0 10rpx;
							color: #666;
							font-size: 24rpx;
						}
					}

					.PriceAndCount {
						display: flex;
						flex-direction: column;
						text-align: end;

						.Price {
							margin-top: 20rpx;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;


							.priceNum {
								font-size: 32rpx;
							}
						}

						.Count {
							color: #999;
							font-size: 28rpx;
						}
					}

				}
			}

			.OrderInformation {
				width: 702rpx;
				background-color: #FFFFFF;
				border-radius: 25rpx;
				margin-top: 16rpx;
				padding: 32rpx 24rpx 26rpx ;

				.InfoItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;
					color: #000;
					opacity: 0.4;
					font-size: 24rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.InfoContent {
						color: #333333;
						font-size: 24rpx;

					}
				}


			}

			.PaymentInformationTitle {
				font-size: 28rpx;
				color: #333;
				margin-top: 32rpx;
				margin-bottom: 16rpx;
			}

			.PaymentInformation {
				width: 702rpx;
				background: #FFFFFF;
				box-shadow: 0 8rpx 20rpx 0 rgba(153, 153, 153, 0.12);
				border-radius: 24rpx;
				padding: 32rpx 24rpx 26rpx 24rpx;

				.infoItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 26rpx;
					font-size: 24rpx;

					.infoItemTitle {
						color: #999;
					}
				}

				.ProofOfPaymentRight {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.ProofOfPaymentImage {
						width: 120rpx;
						height: 120rpx;
						margin-right: 24rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}

		}

		.OrderStatusAndAddressYs {
			padding-bottom: 20rpx;
			// margin-bottom: 20rpx;
		}

		.ConfimReceiveGoods {
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			height: 144rpx;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx;

			view {
				margin-left: 20rpx;
			}

			.ReceiveGoodsBtn {
				width: 232rpx;
				height: 76rpx;
				background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
				border-radius: 38rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;
				margin-top: 20rpx;
			}

			.CancelOrderBtn {
				width: 232rpx;
				height: 76rpx;
				border-radius: 38rpx;
				opacity: 1;
				border: 2rpx solid rgba(153, 153, 153, 0.4);
				line-height: 76rpx;
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999
			}

			.ProofPaymentBtn {
				width: 232rpx;
				height: 76rpx;
				margin-top: 20rpx;
				background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
				border-radius: 38rpx;
				line-height: 76rpx;
				text-align: center;
				color: #fff;
				margin-left: 24rpx;

				.title {
					width: 100%;
					text-align: center;
				}
			}
		}

		.ProofPayment {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 24rpx !important;
			color: #333333;
			font-size: 32rpx;
			padding: 40rpx 32rpx;

			.title {
				color: #333333;
				font-size: 32rpx;
				font-weight: 700;
			}

			.MethodOfPayment {
				.MethodOfPaymentTitle {
					text-align: start;
					font-size: 28rpx;
					margin-top: 40rpx;
					font-weight: 700;
					margin-bottom: 24rpx;
				}

				.picker {
					.Selector {
						height: 76rpx;
						background: rgba(153, 153, 153, 0.12);
						border-radius: 8rpx;
						text-align: start;
						line-height: 76rpx;
						padding: 0 24rpx;
						color: #999999;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.BottomArrow {
							width: 28rpx;
							height: 28rpx;
						}
					}

				}

			}


			.ProofOfPayment {
				margin-top: 40rpx;

				.ProofOfPaymentTitle {
					text-align: start;
					color: #333333;
					font-size: 28rpx;
					font-weight: 700;
				}

				.ProofOfPaymentContent {
					display: flex;
					margin-top: 24rpx;
					width: 100%;

					.UploadImage {
						width: 186rpx;
						height: 186rpx;
					}

					.ProofList {
						display: flex;

						.ProofListItem {
							width: 186rpx;
							height: 186rpx;
							position: relative;
							margin-right: 24rpx;


							.ProofListImage {
								width: 100%;
								height: 100%;

								&:last-child {
									margin-right: 0;
								}
							}

							.clearImage {
								position: absolute;
								top: 0;
								right: 0;
								width: 32rpx;
								height: 32rpx;
							}

						}

					}
				}

			}

			.NoteOfVoucher {
				margin-top: 40rpx;

				.NoteOfVoucherTitle {
					text-align: start;
					color: #333333;
					font-size: 28rpx;
					font-weight: 700;
				}

				.textarea {
					width: 606rpx;
					height: 236rpx;
					background: rgba(153, 153, 153, 0.12);
					border-radius: 8rpx;
					margin-top: 24rpx;
					padding-top: 24rpx;
					padding-left: 30rpx;
					text-align: start;
					font-size: 28rpx;
					color: #333;
				}

				/deep/ .placeholder {
					color: #999999 !important;
					font-size: 28rpx !important;
					text-align: start !important;
				}
			}

			.BtnArea {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx 0 30rpx;
				font-size: 28rpx;
				margin-top: 40rpx;

				.ConfirmBtn {
					width: 248rpx;
					height: 76rpx;
					background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
					border-radius: 38rpx;
					line-height: 76rpx;
					text-align: center;
					color: #fff;
				}

				.CancelBtn {
					width: 248rpx;
					height: 76rpx;
					border-radius: 38rpx;
					border: 2rpx solid rgba(153, 153, 153, 0.4);
					line-height: 76rpx;
					text-align: center;
					color: #999999;
					// opacity: .4;
				}
			}
		}

	}
</style>